<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>Email Batch Sender</h1>
      </el-header>
      
      <el-container>
        <el-aside width="200px">
          <el-menu
            :router="true"
            :default-active="$route.path"
            class="el-menu-vertical-demo">
            <el-menu-item index="/email-addresses">
              <i class="el-icon-message"></i>
              <span slot="title">Email Addresses</span>
            </el-menu-item>
            <el-menu-item index="/email-templates">
              <i class="el-icon-document"></i>
              <span slot="title">Email Templates</span>
            </el-menu-item>
            <el-menu-item index="/email-tasks">
              <i class="el-icon-s-promotion"></i>
              <span slot="title">Email Tasks</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.el-header {
  background-color: #409EFF;
  color: white;
  line-height: 60px;
  text-align: center;
}

.el-aside {
  background-color: #f8f9fa;
  color: #333;
  border-right: 1px solid #e6e6e6;
  height: calc(100vh - 60px);
}

.el-main {
  padding: 20px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.action-buttons {
  margin-bottom: 20px;
}

.form-container {
  max-width: 600px;
  margin: 0 auto;
}

.upload-demo {
  margin-bottom: 20px;
}

.status-tag-created {
  background-color: #909399;
}

.status-tag-in-progress {
  background-color: #E6A23C;
}

.status-tag-completed {
  background-color: #67C23A;
}

.status-tag-failed {
  background-color: #F56C6C;
}

.template-editor {
  margin-top: 20px;
}

.template-preview {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.task-progress {
  margin-top: 10px;
}

.task-card {
  margin-bottom: 20px;
}

.task-actions {
  margin-top: 10px;
}
</style>
